<template>
    <div id="container">
        <div id="viewDiv"></div>
        <div id="tool_panel"  :style="{backgroundColor:store.state.theme==='dark'?'rgb(50,50,50)':'rgb(240,240,240)'}">
            <el-tabs v-model="tabsValue" style="width:100%;height:100%;" type="border-card" ><!--选项卡组件-->
                <el-tab-pane name="案例1" label="案例1" ><!--案例1选项卡-->
                    <el-space direction="vertical" style="width:100%;height:100%;" alignment="flex-start">
                        <el-text size="large" style="color:gray;">请选择要显示的图层:</el-text>
                        <el-checkbox-group v-model="checkboxValue">
                            <el-checkbox-button v-for="item in layers.map((layer)=>{return layer.title})" 
                                :key="item" :value="item" :label="item" @change="checkbox_change"></el-checkbox-button>
                        </el-checkbox-group>
                    </el-space>
                </el-tab-pane>
                
                <el-tab-pane name="案例2" label="案例2"><!--案例2选项卡-->
                    <el-space  direction="vertical" style="width:100%;height:320px;overflow:auto;" :size="0" alignment="flex-start">
                        <el-button text v-for="(item,index) in link_data.data" @click="viewGoto(item)" :key="index" type="primary">
                            {{index}}&nbsp;:&nbsp;{{item}}
                        </el-button>
                    </el-space>
                </el-tab-pane>
                
                <el-tab-pane :disabled="true">
                    <template #label>
                        <el-text type="info" style="color:rgb(120,70,70)">请耐心加载一分钟</el-text> 
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import {深色底图,灰色底图} from '../底图库'
import {onMounted,ref,reactive} from 'vue'
import Map from "@arcgis/core/Map"
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Query from '@arcgis/core/rest/support/Query'
import { useStore } from 'vuex'
const store=useStore()//加载store对象,用于控制主题切换等
var view,map,query//声明视图对象,地图对象,查询参数对象
var layers=[]//创建一个数组存储三个图层对象,目的是控制每个图层的显隐
var layer1_features=[]
//👆创建一个数组存储layer1图层(点要素图层)所有的图形对象,基于此生成layer1图形集合name属性的集合并提供foTo()操作
const link_data=reactive({
    data:[]
})//存储layer1所有图形的name属性的数组,目的是循环渲染layer1所有图形的文字按钮
const tabsValue=ref('案例1')//选项卡组件双向绑定的变量,用于切换选项卡
const checkboxValue=ref([])//多选按钮双向绑定的数组变量,用于切换图层显隐
const checkbox_change=()=>{//checkbox组件change事件处理函数
    for(let layer of layers){//遍历所有图层对象,默认关闭该图层,
        layer.visible=false
        for(let item of checkboxValue.value){
            //基于每一个图层对象遍历checkbox绑定的数组变量,如果有一个成员跟该图层title数据一致,则点亮该图层
            if(item===layer.title){
                layer.visible=true
            }
        }
    }
}
const viewGoto=(event)=>{//点击循环渲染的文字按钮,实现goTo至相应的点要素
    for(let feature of layer1_features){//遍历layer1图形的集合
        if(feature.attributes.name===event){//判断每个图形的name属性跟否跟点击到的文字按钮的表示文字一致
            view.goTo({//如果一致,则执行goTo
                target:feature.geometry,
                zoom:19
            },{
                duration:500
            })
        }
    }
}
onMounted(()=>{//钩子函数,组件挂载到DOM元素时执行
    map=new Map({//创建地图对象
        basemap:{
            baseLayers:[]
        }
    })
    switch(store.state.theme){//基于store.state.theme的值,加载相应主题的矢量切片底图
        case "dark":
            map.basemap.baseLayers.add(深色底图) 
            break
        case "light":
            map.basemap.baseLayers.add(灰色底图)
            break
    }
    var layer1=new FeatureLayer({
        url:"https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0",
        title:"点要素图层",
        renderer:{
            type:"simple",
            symbol:{
                type:"simple-marker",
                color:[200,200,200],
                size:10
            },
        },
        minScale:2000000,
    })
    var layer2=new FeatureLayer({
        url:"https://ws8575.club/web/rest/services/Hosted/道路_线要素_要素图层_3857/FeatureServer/0",
        title:"线要素图层",
        renderer:{
            type:"simple",
            symbol:{
                type:"simple-line",
                color:[200,200,200]
            }
        }
    })
    var layer3=new FeatureLayer({//分别创建三个要素图层对象
        url:"https://ws8575.club/web/rest/services/Hosted/山东省市界_玉米小麦大米产量_面要素_要素图层_3857/FeatureServer/0",
        title:"面要素图层",
        renderer:{
            type:"simple",
            symbol:{
                type:"simple-fill",
                color:[200,200,200,0.1],
                outline:{
                    color:[200,50,50,1],
                    width:2
                }
            }
        }
    })
    query=new Query({//创建查询参数对象
        returnGeometry:true,
        outFields:["*"],
        where:`name <> ''`
    })
    layer1_features=layer1.queryFeatures(query).then((response)=>{//对layer1图层进行图层查询并获取图形对象的集合
        layer1_features=response.features
        link_data.data=layer1_features.map((feature)=>{
            //基于图形对象集合获取获取layer1图层所有图层对象的name属性的集合,目的是循环渲染文字按钮标签并显示为所有图形的name
            return feature.attributes.name
        })
    })
    layers=[layer1,layer2,layer3]//将三个要素图层放到数组中
    map.addMany(layers)//向map对象添加这三个图层以允许在视图中显示
    view=new MapView({
        map:map, container:"viewDiv", zoom:2, 
        constraints:{
            rotationEnabled:false
        }
    })
    checkboxValue.value=layers.map((layer)=>{return layer.title})
    //👆获取所有图层的title值,目的是循环渲染多选框按钮标签
    view.when(()=>{//视图创建时goTo至指定位置
        view.goTo({
            center:[120.3,36.1],
            zoom:8
        },{
            duration:500
        })
    })
})
</script>

<style scoped>
    #viewDiv,#container{
        height:100%;width:100%;padding:0;margin:0;
    }
    #tool_panel{
        position:absolute;top:15px;  left:15px;
        box-shadow:0 0 5px gray;
        border-radius:2px;
        height:auto;width:340px;
    }
</style>
